<!--
 * @Author       : cxh
 * @Date         : 2021-12-20 19:53:20
 * @LastEditTime : 2021-12-20 22:23:31
 * @LastEditors  : cxh
 * @Description  : 
 * @FilePath     : \vue_WorkSpace\demo2.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .header {
        width: 800px;
        height: 100px;
        background-color: #00f;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .item {
        width: 200px;
        height: 100px;
    }

    .item>div {
        width: 100%;
        height: 100%;
        line-height: 100px;

    }

    .skyblue {
        background-color: skyblue;
        color: white;
    }

    .yellowC {
        background-color: yellow;
    }

    .headIcon {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    .swipperOuter {
        width: 800px;
        height: 400px;
        background-color: #f0f;
        margin: 0 auto;
        position: relative;
    }

    .swipper>button {
        display: block;
        border: none;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 200px;
        cursor: pointer;
    }

    .swipper>img {
        width: 800px;
        height: 400px;
        display: none;
    }

    .swipper .show {
        display: block;
    }

    .left {
        left: 20px;
    }

    .right {
        right: 20px;
    }
</style>

<body>
    <div class="header">
        <div class="item" v-for="item in headList">
            <div :class="'headIcon '+ (item.isLight ? item.lightColor : 'yellowC')" v-text=item.label
                @click="changeColor(item)">

            </div>

        </div>
    </div>

    <div class="swipperOuter">
        <div class="swipper">
            <button class="left" @click="btnClickHandler('left')"> &lt;</button>
            <button class="right" @click="btnClickHandler('right')"> &gt;</button>
            <img v-for="(item,index) in imgs" :src="item" :class=" 'item'+ ' '+(index == currentIndex ? 'show' : '')">
        </div>
    </div>

</body>
<script>
    new Vue({
        el: ".header",
        data: {
            headList: [{
                    id: 1,
                    label: "首页",
                    isLight: false,
                    lightColor: "skyblue"
                },
                {
                    id: 2,
                    label: "分类",
                    isLight: true,
                    lightColor: "skyblue"
                },
                {
                    id: 3,
                    label: "购物车",
                    isLight: false,
                    lightColor: "skyblue"
                },
                {
                    id: 4,
                    label: "我的",
                    isLight: false,
                    lightColor: "skyblue"
                }
            ]
        },
        methods: {
            changeColor(item) {
                // item.isLight = !item.isLight;
                for (var i = 0; i < this.headList.length; i++) {
                    console.log(this.headList[i])
                    item.isLight = true;
                    if (this.headList[i].id != item.id) {
                        console.log(this.headList[i].id)
                        this.headList[i].isLight = false;
                    }
                }
            }
        },
    })

    new Vue({
        el: ".swipper",
        data: {
            currentIndex: 1,
            imgs: [
                'https://img0.baidu.com/it/u=1429651842,2045410088&fm=26&fmt=auto',
                'https://img2.baidu.com/it/u=1704007411,3954041731&fm=26&fmt=auto',
                'https://img1.baidu.com/it/u=1470279824,2995484050&fm=26&fmt=auto',
                "https://img0.baidu.com/it/u=1985782942,2642646797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
            ]
        },
        methods: {
            btnClickHandler(direction) {
                if (direction == 'left') {
                    this.currentIndex = this.currentIndex === 0 ? this.imgs.length - 1 : this.currentIndex - 1;
                } else {
                    this.currentIndex = this.currentIndex === this.imgs.length - 1 ? 0 : this.currentIndex + 1;
                }
            }
        }

    })
</script>

</html>